<template>
  <el-dialog
    :title="'修改'"
    :visible.sync="dialogFormVisible"
    width="500px"
    custom-class="dialog-view"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="合约：">
          <div>{{ form.contract }}</div>
      </el-form-item>
      <el-form-item label="触发价格">
        <div class="Twokey view flex-row align-center Twokey-set">
          <div class="w80 m-r-5 select">
            <el-select size="mini"  v-model="form.cfpriceType"  placeholder="请选择" class="width100">
              <el-option
                v-for="(item, inx) in cfPriceTypeOpts"
                :key="inx"
                
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="fuhao m-r-5 w80 ">
              <el-select size="mini"  class="select" v-model="form.size"  placeholder="请选择">
              <el-option
                v-for="(item, inx) in fuhaoOpts"
                :key="inx"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="w120">
            <el-input size="mini" type="number" v-model="form.cfprice" min="0.01"/>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="订单类型" prop="mname">
        <el-select size="mini"  v-model="form.orderType"  placeholder="请选择">
          <el-option
            v-for="(item, inx) in orderTypeOpts"
            :key="inx"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="委托价格" prop="mname">
        <el-input type="number"  class="twokey2_hands" size="mini" v-model="form.toprice"/>
      </el-form-item>

       <el-form-item label="委托数量" prop="mname">
          <div class="view flex-row align-center">
            <el-input class="twokey2_hands " v-model="form.volume" type="number" name="number" value="1" min="1" size="mini"/>
                <div class="m-l-5">手</div>
          </div>
                
      </el-form-item>

      <el-form-item label="买卖方向" prop="rise_fall">
        <el-radio-group v-model="form.rise_fall">
          <el-radio :label="'rise'">买入</el-radio>
          <el-radio :label="'fall'">卖出</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="开平方向" prop="buysale">
         <el-radio-group v-model="form.buysale">
            <el-radio :label="'buy'">开仓</el-radio>
            <el-radio :label="'sale'">平仓</el-radio>
          </el-radio-group>
      </el-form-item>

      <el-form-item label="有效期" prop="mname">
         <el-select size="mini"  v-model="form.vtype"  placeholder="请选择">
            <el-option
              v-for="(item, inx) in vtypeopts"
              :key="inx"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  // import { addmarginIn, editmarginIn } from '@/api/ad'

  export default {
    data() {
      return {
        dialogFormVisible: false,
        effective: 1,
        loading: false,
        vtypeopts: [
          {
            value: 0,
            label: '当日有效'
          },
          {
            value: 1,
            label: '永久有效'
          }
        ],
        orderTypeOpts: [
          {
            value: 1,
            label: '市价'
          },
          {
            value: 2,
            label: '限价'
          }
        ],
        effectiveOpts: [
          {
            label: '当日有效',
            value: 1
          },
          {
            label: '永久有效',
            value: 2
          }
        ],
        
        fuhaoOpts: [
          {
            value: 'big',
            label: '>='
          },
          {
            value: 'small',
            label: '<='
          },
        ], // >= <=
        cfPriceTypeOpts: [
          {
            value: 1,
            label: '最新价'
          },
          // {
          //   value: 2,
          //   label: '买价'
          // },
          // {
          //   value: 3,
          //   label: '卖价'
          // }
        ],// 触发价格
        form: {
          vtype: 0, // 有效期
          cfprice: 0, // 触发价格
          toprice: '', // 委托价格
          orderType: 1,
          pricetype: 1,
          cfpriceType: 1,
          size: 'big',
          buysale: 'buy',
          rise_fall: 'rise',
          volume: 0,
        },
        rules: {
          cfprice: [
            { required: true, message: '请输入目标触发价格', trigger: 'change' }
          ],
          toprice: [
            { required: true, message: '请选择委托价格', trigger: 'blur' }
          ],
          pricetype: [
            { required: true, message: '请选择订单类型', trigger: 'change' }
          ],
          volume: [
            { required: true, message: '请填写交易手数', trigger: 'blur' }
          ]
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      showEdit(row) {
        this.form = Object.assign(this.form, row)
        this.form.rise_fall = row.risefall
        this.form.pricetype  = row.ptype
        this.form.volume = row.tonum
        this.form.taskid = row.id
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.loading  = true
            this.$post('order/edittaskorder', this.form).then(res => {
              this.close()
              this.loading  = false
              this.$notify.success(res.msg);
              this.$emit('fetch-data')
            }).catch( ret => {
                this.loading  = false
            });
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style lang="less" scoped>
/deep/.el-form-item {margin-bottom: 10px;}
</style>
